<template>
  <div>
    <div>
      <el-autocomplete
        v-model="searchStr"
        placeholder="请输入内容"
        class="search-input-inspectlib"
        :fetch-suggestions="querySearchAsync"
        :trigger-on-focus="false"
        clearable
        value-key="name"
        @select="handleSelect"
      >
        <i class="el-icon-search el-input__icon" slot="suffix"></i>
      </el-autocomplete>
    </div>

    <div class="btn-wrap">
      <el-button size="small" @click="add" type="primary">新增</el-button>
      <!-- <el-button size="small" type="primary">导入</el-button>
      <el-button size="small" type="primary">导出</el-button> -->
    </div>

    <div class="tree-wrap">
      <el-tree
        ref="tree"
        :data="treeData"
        default-expand-all
        node-key="id"
        current-node-key="-1"
        :expand-on-click-node="false"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :highlight-current="true"
      >
        <span class="span-ellipsis" slot-scope="{ node }">
          <span :title="node.label">{{ node.label }}</span>
        </span>
      </el-tree>
    </div>

    <!-- 新增 -->
    <dialog-add ref="dialogAdd" />
  </div>
</template>

<script>
import dialogAdd from "./dialogAdd";
import {
  getInspectLibTree,
  // queryListByName
} from "../../../../api/system/inspectLib";

export default {
  components: { dialogAdd },
  data() {
    return {
      searchStr: "",
      treeData: [],
      selectNode: {},
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  mounted() {},
  created() {
    // 获取方案库树
    this.getInspectLibTree();
  },
  methods: {
    /**
     * 模糊搜索
     */
    querySearchAsync(queryString, cb) {
      if (queryString.trim() !== "") {
        queryListByName({
          name: queryString
        }).then(res => {
          cb(res.data);
        });
      }
    },
    /**
     * 模糊搜索后选中
     */
    handleSelect(item) {
      // 选中该结点
      this.$refs.tree.setCurrentKey(item.id);
      // 查询右侧表格数据
      this.$parent.$refs.tableComp.param = {
        parentId: item.id,
        current: 0
      };
      this.$parent.$refs.tableComp.queryPage();
    },
    /**
     * 获取方案库树
     */
    getInspectLibTree() {
      getInspectLibTree(-1).then(res => {
        this.treeData = [res.data];
      });
    },
    /**
     * 树点击
     */
    handleNodeClick(data) {
      this.$parent.$refs.tableComp.param = {
        parentId: data.id,
        current: 0
      };
      this.$parent.$refs.tableComp.queryPage();
    },
    /**
     * 新增
     */
    add() {
      let dialogAdd = this.$refs.dialogAdd;
      dialogAdd.dialogFormVisible = true;
      dialogAdd.sizeForm = {};
      let currentNode = this.$refs.tree.getCurrentNode();
      dialogAdd.sizeForm.parentId = currentNode.id;
      dialogAdd.sizeForm.parentName = currentNode.name;
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-wrap {
  margin: 10px 0;
  text-align: center;
}

.tree-wrap {
  position: absolute;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 5px;
  overflow-y: auto;
}

.search-input-inspectlib {
  width: 100%;
}

.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

<style lang="scss">
.search-input-inspectlib .el-input--suffix .el-input__inner {
  border-radius: 0;
}
</style>